<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <input v-model="val" type="text"> 
       <div>
         <ul v-show="val.length > 0">
             <li v-for="item in arr">
                 {{ item }}
             </li>
         </ul>
       </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                val: "",
                arr: [
                    'aaaa',
                    'bbbb',
                    'cccc',
                    'aabb',
                    'bbcc'
                ]
            },
            // 实时监听 (监听的值发生改变的时候会执行)
            watch: {
                // newValue  当前的值
                // oldValue  上一次的值
                val(newValue, oldValue) {
                    this.arr = this.arr.filter(item => {
                        return item.includes(this.val)
                    })
                }
            }
        })


    </script>
</body>
</html>